@charset "UTF-8";
:root { --max-width: 600px; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body, #app { min-height: 100%; background-color: #f3f3f3; }

body, ul, li { margin: 0; padding: 0; }

li { list-style: none; }

a { text-decoration: inherit; color: inherit; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -moz-user-focus: none; -moz-user-select: none; }

input { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

input, textarea, button, select { outline: none; }

#app { width: 100%; max-width: 600px; margin: auto; font-size: 1.6rem; font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; visibility: hidden; opacity: 0; transition: linear 0.2s; }

#app.on { visibility: visible; opacity: 1; }

.clamp { overflow: hidden; }

.link-success { color: #7cc0a9; }

.link-warning { color: #d59d6b; }

.link-danger { color: #fe7d7d; }

.link-primary { color: #5d5def; }

.label { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 1rem; background-color: #666; color: #fff; font-size: 1rem; font-weight: normal; line-height: normal; }

.label-success { background-color: #7cc0a9; }

.label-warning { background-color: #d59d6b; }

.label-danger { background-color: #fe7d7d; }

.label-primary { background-color: #5d5def; }

.label-info { background-color: #8eb3d4; }

.label-dark { background-color: #2c2c2c; }

.label-gray { background-color: #9f9f9f; }

.badge { display: inline-block; width: 0.8rem; height: 0.8rem; background-color: #ccc; border-radius: 50%; vertical-align: middle; }

.badge.badge-danger { background-color: #fe7d7d; }

.btn { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; padding: 1rem 2rem; font-size: 2rem; border: 1px solid #ccc; background-color: #fff; color: #888; transition: linear 0.2s; outline: none; }

.btn.btn-small { width: auto; font-size: 1rem; padding: .4rem 1.2rem; }

.btn.btn-half-round { border-radius: 0.8rem; }

.btn:hover, .btn:active { border: 1px solid #b3b3b3; }

.btn.btn-success { background-color: #7cc0a9; border: 1px solid #7cc0a9; color: #fff; }

.btn.btn-success:hover, .btn.btn-success:active { border: 1px solid #4bb995; background-color: #4bb995; }

.btn.btn-warning { background-color: #d59d6b; border: 1px solid #d59d6b; color: #fff; }

.btn.btn-warning:hover, .btn.btn-warning:active { border: 1px solid #cf894b; background-color: #cf894b; }

.btn.btn-danger { background-color: #fe7d7d; border: 1px solid #fe7d7d; color: #fff; }

.btn.btn-danger:hover, .btn.btn-danger:active { border: 1px solid #ff5c5c; background-color: #ff5c5c; }

.btn.btn-primary { background-color: #5d5def; border: 1px solid #5d5def; color: #fff; }

.btn.btn-primary:hover, .btn.btn-primary:active { border: 1px solid #251fce; background-color: #251fce; }

.btn.btn-light { border: 1px solid #fff; }

.btn.btn-dark { border: 1px solid #2c2c2c; background-color: #2c2c2c; color: #fff; }

.dropload-up, .dropload-down { position: relative; height: 0; overflow: hidden; font-size: 12px; /* 开启硬件加速 */ -webkit-transform: translateZ(0); transform: translateZ(0); }

.dropload-down { height: 50px; }

.dropload-refresh, .dropload-update, .dropload-load, .dropload-noData { height: 50px; line-height: 50px; text-align: center; }

.dropload-load .loading { display: inline-block; height: 15px; width: 15px; border-radius: 100%; margin: 6px; border: 2px solid #666; border-bottom-color: transparent; vertical-align: middle; -webkit-animation: rotate 0.75s linear infinite; animation: rotate 0.75s linear infinite; }

@-webkit-keyframes rotate { 0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); } }

@keyframes rotate { 0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); } }

.toast { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; text-align: center; visibility: hidden; opacity: 0; transition: .15s linear; }

.toast.on { visibility: visible; opacity: 1; }

.toast .toast-box { position: relative; top: 40%; display: inline-block; padding: 0 2rem; background-color: rgba(0, 0, 0, 0.7); color: #fff; font-size: 1.4rem; line-height: 3em; border-radius: 4px; }

.loading { position: fixed; z-index: 10001; top: 0; left: 0; width: 100%; height: 100%; text-align: center; visibility: hidden; opacity: 0; transition: .15s linear; }

.loading.on { visibility: visible; opacity: 1; }

.loading .loading-box { position: relative; top: 40%; display: inline-block; padding: 0 2rem; background-color: rgba(0, 0, 0, 0.7); color: #fff; font-size: 1.4rem; border-radius: 4px; line-height: 3rem; }

.loading .loading-box i { line-height: inherit; }

.media { position: fixed; z-index: 10; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; visibility: hidden; opacity: 0; transition: .15s linear; background-color: rgba(0, 0, 0, 0.6); }

.media.on { visibility: visible; opacity: 1; }

.media.on .media-box { transform: translateY(0); }

.media .media-box { position: relative; width: 80%; padding: 0 1rem; background-color: #fff; font-size: 1rem; line-height: 3em; border-radius: 4px; transform: translateY(-1rem); transition: linear .15s; min-height: 16.5rem; }

.media .media--header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed #ccc; font-size: 1.6rem; line-height: 3.8rem; }

.media .media--body { min-height: 6rem; max-height: 60%; padding: 0.6rem 0; overflow-y: auto; }

.media .media--footer { display: flex; justify-content: flex-end; align-items: center; padding: 0.8rem 0; border-top: 1px dashed #ccc; font-size: 1.6rem; }

.media .media--footer .btn { margin-left: 0.8rem; padding: .8rem 1.8rem; font-size: 1.4rem; }

.confirm { position: fixed; z-index: 10; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; text-align: center; visibility: hidden; opacity: 0; transition: .15s linear; background-color: rgba(0, 0, 0, 0.6); }

.confirm.on { visibility: visible; opacity: 1; }

.confirm.on .confirm-box { transform: translateY(0); }

.confirm .confirm-box { position: relative; width: 70%; max-height: 80%; min-height: 1rem; background-color: #fff; font-size: 1rem; line-height: 3em; border-radius: 4px; transform: translateY(-1rem); transition: linear .15s; overflow: hidden; }

.confirm .confirm--title { padding: 1.2rem 0; font-size: 1.4rem; text-align: center; }

.confirm .confirm--button { display: flex; justify-content: space-around; align-items: center; font-size: 1.4rem; }

.confirm .confirm--button > * { width: 100%; padding: 0.7rem 0; font-size: inherit; color: inherit; }

.confirm .confirm--button .confirm-complete { color: #fff; background-color: #5d5def; border-top: 1px solid #5d5def; }

.confirm .confirm--button .confirm-close { border-top: 1px solid #f0f0f0; }

.half-screen-dialog { visibility: hidden; position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); opacity: 0; transition: linear 0.2s 0.2s; }

.half-screen-dialog.on { visibility: visible; opacity: 1; transition: linear 0.2s; }

.half-screen-dialog .half-screen-dialog--header { height: 2rem; text-align: center; }

.half-screen-dialog .half-screen-dialog--body { padding: 0 2rem 1rem; max-height: calc(100% - 7rem); overflow-y: auto; -webkit-overflow-scrolling: touch; }

.half-screen-dialog .half-screen-dialog--footer { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; margin: auto; padding: 1rem 2rem; font-size: 1.6rem; color: #9f9f9f; }

.half-screen-dialog .half-screen-dialog--footer .btn { padding: 0.4rem 1.8rem; font-size: 1.6rem; }

.half-screen-dialog .half-screen-dialog-box { position: absolute; z-index: 1; top: 0; bottom: 0; right: -100%; width: 70%; height: 100%; background-color: #fff; }

#app { padding-bottom: 8rem; }

#oaNetDisk { font-size: 0.8rem !important; }

.header { background-color: #fff; }

.header .header-box { display: flex; margin-bottom: 0.6rem; padding: 1rem 2rem; color: #aaa; }

.header .header-box .header--avatar { width: 4rem; height: 4rem; margin-right: 1rem; }

.header .header-box .header--avatar img { width: 100%; height: 100%; border-radius: 50%; }

.header .header-box .header--info-name { font-size: 110%; color: #333; white-space: nowrap; }

.header .header-box .header--info-name .header--info-name-username { max-width: 10rem; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.header .header-box .header--info-name .header--info-name-gcname { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; color: #5d5def; display: inline-block; }

.info { background-color: #fff; }

.info .info-box { margin-bottom: 0.6rem; padding: 2rem; color: #aaa; line-height: 3rem; }

.info .info-box:empty { display: none; }

.info .info--parts-title { display: flex; align-items: center; color: #333; }

.info .info--parts-title .info--parts-title-text { flex: 1; }

.info .info--parts-title .info--item-edit { color: #aaa; }

.info .info--item { display: flex; line-height: 2rem; }

.info .info--item.hide { display: none; }

.info .info--item:not(:first-of-type) { margin-top: 1.4rem; }

.info .info--item .info--item-title { display: flex; max-width: 49%; min-width: 8rem; margin-right: 1rem; color: #999; }

.info .info--item .info--item-desc { display: flex; align-items: center; flex: 1; color: #333; word-break: break-all; }

.info .info--item .info--item-desc img { width: 5rem; height: 5rem; margin: 0 0.4rem 0.4rem 0; border-radius: 0.4rem; vertical-align: top; }

.info .info--item .info--item-desc a { display: block; text-decoration: underline; }

.info .info--item .info--item-desc.edited { color: #7cc0a9; }

.info .info--item .info--item-desc-input { display: flex; align-items: center; width: 100%; margin-top: 0.6rem; border: none; border-bottom: 1px solid #ccc; font-size: inherit; line-height: 1.6rem; }

.info .info--item .info--item-edit i { padding: 0 0.5rem; line-height: inherit; }

.info .info--item .info--item-desc-box figure { float: left; margin: 0; }

.info .info--parts { margin: 1rem 0; padding: 1rem 2rem; border-radius: 4px; background-color: #f4f5f7; }

.info .info--parts.hide { display: none; }

.info .info--item-desc-netdisk { float: left; width: 5rem; height: 7rem; margin: 0 0.5rem 0.5rem 0; }

.info .info--item-desc-netdisk p { margin: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.process { background-color: #fff; }

.process .process-box { padding: 3rem 2rem; color: #aaa; margin-bottom: 0.6rem; }

.process .process--item { display: flex; position: relative; padding-bottom: 3rem; }

.process .process--item.now .process--item-avatar::before { content: ''; position: absolute; z-index: 2; top: 0; left: -0.4rem; bottom: 0; width: 6px; height: 6px; margin: auto; border-radius: 50%; background-color: #7cc0a9; }

.process .process--item::after { content: ''; position: absolute; z-index: 0; top: 0; left: 3rem; width: 0; height: 100%; border-right: 1px solid #ddd; }

.process .process--item.item-end { padding-bottom: 0; }

.process .process--item.item-end .process--item-avatar span { display: inline-block; width: 3rem; height: 3rem; border-radius: 50%; background-color: #a8a8a8; color: #fff; line-height: 3rem; font-size: 1rem; text-align: center; }

.process .process--item.item-end::after { content: none; }

.process .process--item-avatar { position: relative; z-index: 1; width: 6rem; height: 6rem; margin-right: 1rem; padding: 1rem; background-color: #fff; text-align: center; }

.process .process--item-avatar img { width: 100%; height: 100%; border-radius: 50%; }

.process .process--item-desc { overflow: hidden; flex: 1; margin-top: 0.6rem; }

.process .process--item-desc .process--item-desc-box { display: flex; width: 100%; justify-content: space-between; align-items: top; }

.process .process--item-desc .process--item-desc-box .fa-angle-right { margin: 0 0.6rem; line-height: inherit; transition: linear .1s; transform: rotate(0); }

.process .process--item-desc .process--item-desc-box .process--item-desc--append { width: 100%; margin-top: 1rem; padding: .4rem .8rem; background-color: #f4f5f7; word-break: break-all; }

.process .process--item-desc .process--item-desc-box .commenting { color: #2c2c2c; font-size: 2rem; }

.process .process--item-desc .process--item-desc-box .commenting i { font-size: inherit; }

.process .process--item-desc .process--item-desc-box.on .fa-angle-right { transform: rotate(90deg); }

.process .process--item-desc--title { color: #333; font-size: 120%; }

.process .process--item-desc--time { font-size: 80%; }

.process .process--item-desc--name { width: 100%; overflow: hidden; }

.process .process--item-desc--status { flex: 1; width: 100%; padding-left: 1rem; font-size: 80%; text-align: right; word-break: keep-all; }

.process .process--item-desc--name--detail { margin: 0.4rem 0 0 2rem; }

.opera { padding: 2rem; }

.opera .opera-box { display: flex; background-color: #fff; justify-content: space-between; border-radius: 4px; }

.opera .opera--item { width: 100%; height: 4rem; line-height: 4rem; text-align: center; }

.tabbar { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; width: 100%; max-width: 600px; max-width: var(--max-width); margin: auto; }

.tabbar .tabbar-box { display: flex; justify-content: space-between; }

.reply { position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; text-align: center; transition: 0.15s linear; background-color: rgba(0, 0, 0, 0.2); visibility: hidden; opacity: 0; }

.reply.on { visibility: visible; opacity: 1; }

.reply.on .reply-box { bottom: 0; transition: bottom 0.2s linear; }

.reply .reply-box { display: flex; position: absolute; z-index: 10; bottom: -6rem; left: 0; right: 0; width: 100%; max-width: 600px; max-width: var(--max-width); margin: auto; }

.reply .reply-text { width: 300%; padding: 0 1rem; border: none; border-radius: 0; font-size: 1.4rem; }

.complain-text { width: 100%; height: 18rem; border: none; line-height: 3rem; font-size: 1.3rem; padding: 0.5rem 0; resize: none; }

.warning-text { background-color: #fff; }

.warning-text .warning-text-box { padding: 1rem 2rem; }

.stamp { position: absolute; z-index: 1; top: 1rem; right: 2rem; width: 7rem; height: 7rem; }

.stamp img { width: 100%; }

.pswp__button--share, .pswp__button--fs { display: none !important; }

/* 手写签名 */
.sign-dialog-box { position: absolute; width: 100%; height: 100%; top: 0; z-index: 10001; /* background-color: rgba(0,0,0,.3); */ display: none; /* transform: rotate(90deg); */ }

.sign-dialog-box .sign-dialog { position: absolute; height: 100%; }

.sign-dialog-box.on { display: block; }

.sign-dialog-box .sign-tools-box { position: absolute; width: 100%; bottom: 50%; font-size: 1.6rem; padding: .5rem 2rem; background: #fff; border-bottom: 1px solid #eee; border-top: 1px solid #eee; z-index: 10001; left: calc(50% - 2rem + 2px); transform: rotate(90deg); }

.sign-dialog-box .sign-tools-box .sign-tools { display: flex; justify-content: space-between; }

.sign-dialog-box .sign-tools-box .sign-tools .sign-tools-item.sign-cancel { color: #999; }

.sign-dialog-box .sign-tools-box .sign-tools .sign-tools-item.sign-confirm { color: #5d5def; }

.sign-dialog-box .sign-tools-box .sign-tools .sign-tools-item.sign-clear { color: dodgerblue; }

li.items { background-color: #fff; line-height: 4rem; border-radius: 5px; margin-bottom: 1rem; text-align: left; }

li.items textarea.items-item { height: 10rem; resize: none; }

.items-title { text-align: left; }

.uppercase { text-align: left; }

.img-box { display: flex; flex-wrap: wrap; }

.img-item { position: relative; text-align: center; width: 6rem; height: 6rem; background-color: #ededed; border-radius: 1rem; color: #a6a6a6; font-size: 1rem; margin: .2rem; line-height: 3rem; }

.img-item.imgs::after { content: '×'; position: absolute; top: -.5rem; right: -.5rem; background-color: red; color: #fff; border-radius: 50%; font-size: 1.5rem; line-height: 1.5rem; padding: .1rem .3rem; }

.img-icon { font-size: 1.5rem; display: block; padding-top: 1rem; }

.add-img-label { width: 100%; }

.required:before { content: '*'; color: red; }

.items-item { width: 100%; outline: 0; border: 0; padding: 1rem; line-height: 1.5rem; background-color: #f8f8f8; resize: none; text-align: left; }

.items-item:after { content: ""; display: block; clear: both; }

.item-little-box { text-align: right; font-size: 80%; }

.list .list-box .list--item--content .list--item--content-main .list--item--content--title.new { font-size: 100%; font-weight: normal; color: #999; }

.modal-title { color: #444; }

.list .list-box .list--item { padding: 1rem 1.5rem 1rem 1rem; margin-left: .5rem; border-bottom: 1px solid #f3f3f3; }

.member-list { font-size: 2rem; font-weight: bold; color: #3d4145; margin-bottom: 3rem; }

.member-list .member-list { margin: 1rem 0; padding-left: 1rem; font-size: 1.8rem; line-height: 2rem; font-weight: normal; }

.member-list .item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.member-list.on > .member-list-box .member-list--treei { transform: rotate(90deg); }

.member-list.on > .member-list-children { display: block; }

.member-list input[type="checkbox"] { display: none; }

.member-list input[type="checkbox"]:checked + .item-checked { background-color: #5d5def; border-color: #5d5def; }

.member-list input[type="checkbox"]:checked + .item-checked::after { content: ""; position: absolute; top: 0.4rem; left: 0.45rem; width: 0.8rem; height: 0.5rem; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(-45deg); }

.member-list .item-checked { position: relative; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid #c7c7cc; transition: linear 0.1s; }

.member-list-box { display: flex; justify-content: space-between; align-items: center; }

.member-list-box .member-list--label { flex: 1; text-align: left; width: -webkit-fit-content; width: fit-content; width: -moz-fit-content; }

.member-list-box .member-list--label .sub { color: #999; font-size: 1.5rem; }

.member-list-children { display: none; }

.member-list--treei { width: 0; height: 0; border: 0.5rem solid transparent; border-left: 0.5rem solid #999; border-radius: 1px; transition: linear .1s; transform-origin: 0.25rem center; transform: rotate(0); }

.member-list--treei.on { transform: rotate(90deg); }

.img-item { float: left; position: relative; text-align: center; width: 5rem; height: 5rem; background-color: #bfbfbf; border-radius: 1rem; color: #f8f8f8; font-size: 1rem; margin: .2rem; line-height: 3rem; /* 手写签名 */ }

.img-item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.img-item .img-item-remove { position: absolute; z-index: 1; top: -.3rem; right: -.3rem; font-size: 2rem; background-color: #f6383a; width: 1.6rem; height: 1.6rem; border-radius: 4px; display: flex; justify-content: center; align-items: center; }

.img-item .remove-img { color: #fff; font-size: 1rem; }

.img-item.sign { width: 17.8rem; height: 10rem; }

.img-item.imgs img { width: 100%; height: 100%; border-radius: 1rem; }

.netdisk-item { float: left; position: relative; text-align: center; width: 5rem; height: 7rem; background-color: #bfbfbf; border-radius: 1rem; color: #f8f8f8; font-size: 1rem; margin: .2rem; line-height: 3rem; }

.netdisk-item img { width: 100%; height: 5rem; -o-object-fit: cover; object-fit: cover; }

.netdisk-item .netdisk-item-remove { position: absolute; z-index: 1; top: -.3rem; right: -.3rem; font-size: 2rem; background-color: #f6383a; width: 1.6rem; height: 1.6rem; border-radius: 4px; display: flex; justify-content: center; align-items: center; }

.netdisk-item .remove-img { color: #fff; font-size: 1rem; }

.netdisk-item p { color: #333; line-height: 1rem; margin: -0.5rem 0 0; font-size: 110%; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.netdisk-item .img-uploader { height: 5rem; }

.picker-modal.modal-in { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.picker-modal.modal-in, .picker-modal.modal-out { -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; }

.picker-columns { height: 22rem; overflow: visible; z-index: 11500; width: 100%; }

.picker-modal { position: fixed; bottom: 0; left: 0; z-index: 11500; display: none; width: 100%; height: auto; background: #cfd5da; -webkit-transition-property: -webkit-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }

.picker-modal .bar { overflow: visible; margin-top: 0rem; height: 4.2rem; z-index: 999; line-height: 4.2rem; position: relative; top: 0; border-top: 1px solid #a8abb0; border-bottom: 1px solid #a8abb0; }

.bar-nav { top: 0; }

.bar { position: absolute; right: 0; left: 0; z-index: 10; height: 2.2rem; padding-right: .5rem; padding-left: .5rem; background-color: #f7f7f8; border-bottom: 1px solid #e7e7e7; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.picker-modal .bar .button-link { z-index: 999; line-height: 4.2rem; color: #2c2c2c; font-size: 1.5rem; }

.bar .button.pull-right { margin-left: .5rem; }

.bar .button { position: relative; top: .35rem; z-index: 20; margin-top: 0; font-weight: 400; }

.bar .button-link { top: 0; height: 4.2rem; padding: 0; font-size: .8rem; line-height: 4.2rem; color: #0894ec; border: 0; }

.button { position: relative; display: block; height: 1.35rem; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; padding: 0 .5rem; margin: 0; font-family: inherit; font-size: .7rem; line-height: 1.25rem; color: #0894ec; text-align: center; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; background: 0 0; border: 1px solid #0894ec; border-radius: .25rem; -moz-appearance: none; -ms-appearance: none; appearance: none; }

.pull-right { float: right; }

.title { position: absolute; display: block; width: 100%; padding: 0; margin: 0 -.5rem; font-size: .85rem; font-weight: 500; line-height: 2.2rem; color: #3d4145; text-align: center; white-space: nowrap; }

.picker-modal .bar .title { line-height: 4rem; z-index: 999; font-size: 1.5rem; }

.bar + .picker-items { height: 19.8rem; }

.picker-modal .picker-modal-inner { position: relative; }

.picker-items { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; padding: 0; font-size: 1.5rem; text-align: right; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-mask-box-image: -webkit-linear-gradient(bottom, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); -webkit-mask-box-image: linear-gradient(to top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent); }

.picker-items-col { position: relative; max-height: 100%; overflow: hidden; }

.picker-items-col-wrapper { -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }

.picker-item { position: relative; top: 0; left: 0; width: 100%; height: 36px; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 10px; overflow: hidden; line-height: 36px; color: #999; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }

.picker-item.picker-selected { color: #3d4145; -webkit-transform: translate3d(0, 0, 0); -webkit-transform: rotateX(0); transform: translate3d(0, 0, 0); transform: rotateX(0); }

.picker-center-highlight { position: absolute; top: 50%; left: 0; width: 100%; height: 36px; -moz-box-sizing: border-box; box-sizing: border-box; margin-top: -18px; pointer-events: none; border-top: 1px solid #a8abb0; border-bottom: 1px solid #a8abb0; }

.modal .preloader { width: 1.7rem; height: 1.7rem; }

.preloader-indicator-overlay { visibility: visible; background: 0 0; opacity: 0; }

.preloader-indicator-modal { position: absolute; top: 50%; left: 50%; z-index: 11000; padding: .4rem; margin-top: -1.25rem; margin-left: -1.25rem; background: rgba(0, 0, 0, 0.8); border-radius: .25rem; }

.preloader-indicator-modal .preloader { display: block; width: 1.7rem; height: 1.7rem; }

.picker-modal { position: absolute; bottom: 0; left: 0; z-index: 11500; display: none; width: 100%; height: 13rem; background: #cfd5da; -webkit-transition-property: -webkit-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }

.picker-modal.modal-in, .picker-modal.modal-out { -webkit-transition-duration: .4s; -o-transition-duration: .4s; transition-duration: .4s; }

.picker-modal.modal-in { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.picker-modal.modal-out { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }

.picker-modal .picker-modal-inner { position: relative; height: 100%; }

.picker-modal .toolbar { position: relative; width: 100%; border-top: 1px solid #999; }

.picker-modal .toolbar + .picker-modal-inner { height: -webkit-calc(100% - 2.2rem); height: calc(100% - 2.2rem); }

.picker-modal.picker-modal-inline, .popover .picker-modal { position: relative; z-index: inherit; display: block; background: 0 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.picker-modal.picker-modal-inline .toolbar, .popover .picker-modal .toolbar { border-top: 0; border-right: 0; border-bottom: 1px solid #999; }

.popover .picker-modal { width: auto; }

.popover .picker-modal .toolbar { background: 0 0; }

.preloader { display: inline-block; width: 1rem; height: 1rem; -webkit-transform-origin: 50%; -ms-transform-origin: 50%; -o-transform-origin: 50%; transform-origin: 50%; -webkit-animation: preloader-spin 1s steps(12, end) infinite; -o-animation: preloader-spin 1s steps(12, end) infinite; animation: preloader-spin 1s steps(12, end) infinite; }

.preloader:after { display: block; width: 100%; height: 100%; content: ""; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 50%; background-size: 100%; }

.preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

@-webkit-keyframes preloader-spin { 100% { -webkit-transform: rotate(360deg); } }

@-o-keyframes preloader-spin { 100% { -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes preloader-spin { 100% { -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); } }

.picker-calendar { width: 100%; height: 300px; overflow: hidden; background: #fff; }

@media (orientation: landscape) and (max-height: 415px) { .picker-calendar:not(.picker-modal-inline) { height: 220px; } }

.picker-calendar .picker-modal-inner { overflow: hidden; }

.popover.popover-picker-calendar { width: 320px; }

.picker-calendar-week-days { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 18px; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 11px; background: #f7f7f8; border-bottom: 1px solid #c4c4c4; }

.picker-calendar-week-days .picker-calendar-week-day { width: 14.28571429%; width: -webkit-calc(100% / 7); width: calc(100% / 7); line-height: 17px; text-align: center; -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; }

.picker-calendar-week-days + .picker-calendar-months { height: -webkit-calc(100% - 18px); height: calc(100% - 18px); }

.picker-calendar-months { position: relative; width: 100%; height: 100%; overflow: hidden; }

.picker-calendar-months-wrapper { position: relative; width: 100%; height: 100%; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; }

.picker-calendar-month { position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; height: 100%; flex-direction: column; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; }

.picker-calendar-row { position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 100%; height: 16.66666667%; height: -webkit-calc(100% / 6); height: calc(100% / 6); border-bottom: 1px solid #ccc; -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; }

.picker-calendar-row:last-child { border-bottom: 0; border-left: 0; }

.picker-calendar-day { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 14.28571429%; width: -webkit-calc(100% / 7); width: calc(100% / 7); -moz-box-sizing: border-box; box-sizing: border-box; font-size: 15px; color: #3d4145; text-align: center; cursor: pointer; -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

.picker-calendar-day.picker-calendar-day-next, .picker-calendar-day.picker-calendar-day-prev { color: #ccc; }

.picker-calendar-day.picker-calendar-day-disabled { color: #d4d4d4; cursor: auto; }

.picker-calendar-day.picker-calendar-day-today span { background: #e3e3e3; }

.picker-calendar-day.picker-calendar-day-selected span { color: #fff; background: #0894ec; }

.picker-calendar-day span { display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 100%; }

.picker-calendar-month-picker, .picker-calendar-year-picker { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; width: 50%; max-width: 200px; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-shrink: 10; -ms-flex: 0 10 auto; -webkit-flex-shrink: 10; -ms-flex-negative: 10; flex-shrink: 10; }

.picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only { min-width: 36px; }

.picker-calendar-month-picker span, .picker-calendar-year-picker span { position: relative; overflow: hidden; text-overflow: ellipsis; -webkit-flex-shrink: 1; -ms-flex: 0 1 auto; -webkit-flex-shrink: 1; -ms-flex-negative: 1; flex-shrink: 1; }

.picker-calendar.picker-modal-inline .picker-calendar-week-days, .popover .picker-calendar .picker-calendar-week-days { background: 0 0; }

.picker-calendar.picker-modal-inline .picker-calendar-week-days, .picker-calendar.picker-modal-inline .toolbar, .popover .picker-calendar .picker-calendar-week-days, .popover .picker-calendar .toolbar { border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; }

.picker-calendar.picker-modal-inline .picker-calendar-week-days ~ .picker-calendar-months, .picker-calendar.picker-modal-inline .toolbar ~ .picker-modal-inner .picker-calendar-months, .popover .picker-calendar .picker-calendar-week-days ~ .picker-calendar-months, .popover .picker-calendar .toolbar ~ .picker-modal-inner .picker-calendar-months { border-top: 1px solid #c4c4c4; }

.picker-modal .toolbar-inner { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; height: 2.2rem; text-align: center; }

.picker-calendar-month-picker, .picker-calendar-year-picker { display: block; line-height: 2.2rem; }

.picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only { float: left; width: 25%; height: 2.2rem; line-height: 2rem; }

.picker-calendar-month-picker .current-month-value, .picker-calendar-month-picker .current-year-value, .picker-calendar-year-picker .current-month-value, .picker-calendar-year-picker .current-year-value { float: left; width: 50%; height: 2.2rem; }

.picker-columns { z-index: 11500; width: 100%; height: 13rem; }

.picker-columns.picker-modal-inline, .popover .picker-columns { height: 10rem; }

@media (orientation: landscape) and (max-height: 415px) { .picker-columns:not(.picker-modal-inline) { height: 10rem; } }

i.icon { position: relative; display: inline-block; font-style: normal; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 100% auto; }

i.icon.icon-f7 { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-f7.png); }

i.icon.icon-form-name { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-name.png); }

i.icon.icon-form-password { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-password.png); }

i.icon.icon-form-email { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-email.png); }

i.icon.icon-form-calendar { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-calendar.png); }

i.icon.icon-form-tel { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-tel.png); }

i.icon.icon-form-gender { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-gender.png); }

i.icon.icon-form-toggle { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-toggle.png); }

i.icon.icon-form-comment { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-comment.png); }

i.icon.icon-form-settings { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-settings.png); }

i.icon.icon-form-url { width: 1.45rem; height: 1.45rem; background-image: url(../img/i-form-url.png); }

i.icon.icon-next, i.icon.icon-prev { width: .75rem; height: .75rem; }

i.icon.icon-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M1%2C1.6l11.8%2C5.8L1%2C13.4V1.6%20M0%2C0v15l15-7.6L0%2C0L0%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

i.icon.icon-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2015%2015'%3E%3Cg%3E%3Cpath%20fill%3D'%23007aff'%20d%3D'M14%2C1.6v11.8L2.2%2C7.6L14%2C1.6%20M15%2C0L0%2C7.6L15%2C15V0L15%2C0z'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

i.icon.icon-plus { width: 1.25rem; height: 1.25rem; font-size: 1.55rem; font-weight: 100; line-height: 1rem; text-align: center; }
